<template>
    <div class="nb" id="Nb"></div>
</template>
  
<script>
import * as echarts from "echarts";
export default {
    mounted() {
        this.echartsInit();
    },
    methods: {
        echartsInit() {
            echarts.init(document.getElementById("Nb")).setOption({
                title: {
                    text: "|  公区能耗",
                    textStyle: {
                        color: "#B1E2FE",
                        fontSize: "12",
                    },
                },
                color: ["red", "#eee"],
                legend: {
                    data: ["用水", "用电"],
                    textStyle: {
                        color: "#fff",
                    },
                },
                grid: {
                    top: 50,
                    x: 45,
                    x2: 65,
                    y2: 30,
                },
                tooltip: {
                    trigger: "axis",
                },
                // backgroundColor: "rgba(0,0,0,0.2)",
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                },
                yAxis: [
                    {
                        type: "value",
                        name: "(万吨)",
                        min: 0,
                        max: 10,
                        interval: 2,
                        splitNumber: 6, //设置坐标轴的分割段数
                        axisLine: {
                            lineStyle: {
                                color: "white",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                type: "dashed",
                                color: "#eee",
                            },
                        },
                    },
                    {
                        type: "value",
                        name: "(万度)",
                        min: 0,
                        max: 700,
                        interval: 100,
                        splitNumber: 6, //设置坐标轴的分割段数
                        axisLine: {
                            lineStyle: {
                                color: "white",
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                type: "dashed",
                                color: "#eee",
                            },
                        },
                    },
                ],

                series: [
                    {
                        name: "用水",
                        type: "line",
                        yAxisIndex: 0,
                        data: [
                            4.05, 4.62, 3.17, 2.37, 4.3, 4.74, 8.86, 6.58, 7.53,
                            7.28,
                        ],
                        lineStyle: {
                            color: "#C23531",
                        },
                    },
                    {
                        name: "用电",
                        type: "line",
                        yAxisIndex: 1,
                        data: [
                            418, 424, 405, 420, 396, 464, 587, 647, 623, 484,
                        ],
                        lineStyle: {
                            color: "#4EDA10",
                        },
                        markPoint: {
                            data: [
                                {
                                    name: "周最低",
                                    value: -2,
                                    xAxis: 1,
                                    yAxis: -1.5,
                                },
                            ],
                        },
                    },
                ],
                textStyle: {
                    color: "#fff",
                },
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.nb {
    width: 100%;
    height: 170px;
    color: #fff;
}
</style>
  